<template>
  <div class="app-container">
    <!-- <strong>讲师列表</strong> -->
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="historyQuery.name" placeholder="教师名"/>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <!-- 表格 -->
    <el-table
      :data="list"
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        width="70"
        align="center"
      >
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column label="教师姓名" prop="name" align="center"/>

      <el-table-column label="成果名称" prop="achievementName" align="center"/>

      <el-table-column label="所属分类" prop="subCategory" align="center"/>

      <el-table-column label="教师所属学院" prop="college" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.college === 1">商学院</span>
          <span v-if="scope.row.college === 2">管理学院</span>
          <span v-if="scope.row.college === 3">外语学院</span>
          <span v-if="scope.row.college === 4">堪萨斯国际学院</span>
          <span v-if="scope.row.college === 5">电信与智能制造学院</span>
          <span v-if="scope.row.college === 6">计算机与软件工程学院</span>
          <span v-if="scope.row.college === 7">艺术设计学院</span>
          <span v-if="scope.row.college === 8">医学院</span>
          <span v-if="scope.row.college === 9">文法学院(语委办)</span>
          <span v-if="scope.row.college === 10">体育学院</span>
          <span v-if="scope.row.college === 11">新闻与传播学院</span>
          <span v-if="scope.row.college === 12">建筑工程学院</span>
          <span v-if="scope.row.college === 13">音乐戏剧学院</span>
          <span v-if="scope.row.college === 14">马克思主义学院</span>
          <span v-if="scope.row.college === 15">国际教育学院</span>
          <span v-if="scope.row.college === 16">教育学院</span>
          <span v-if="scope.row.college === 17">继续教育学院</span>
          <span v-if="scope.row.college === 18">国际语言中心</span>
        </template>
      </el-table-column>

      <el-table-column label="申报类别" prop="appCategory" align="center"/>

      <el-table-column label="审阅状态" prop="approval" align="center"/>



      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">

          <el-button type="text" size="4px" icon="el-icon-edit" class="edit-button" @click="outReview(scope.row.id)">打回</el-button>
          <el-button type="text" size="4px" icon="el-icon-circle-check" class="disable-button" @click="okReview(scope.row.id)">通过</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />


  </div>
</template>

<script>
// import teacher from '@/api/adm/teacherAdmin'
// import * as teacher from '@/api/adm/teacherAdmin'
import * as admin from '@/api/super/admin'
export default {
  data() {
    return {
      list: null, // 查询之后接口返回集合
      page: 1, // 当前页
      limit: 10, // 每页记录数
      total: 0, // 总记录数
      historyQuery: {} // 条件封装对象
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 条件查询教师信息
    getList(page = 1) {
      this.page = page
      admin.materialReviewApp(this.page, this.limit, this.historyQuery)
        .then(response => {
          // 请求成功
          // response接口返回的数据
          // console.log(response)
          this.list = response.data.rows

          this.total = response.data.total
          console.log(this.list)
          console.log(this.total)
        })
    },

    //清空要查询的内容
    resetData() {
      this.historyQuery = {}
      this.getList()
    },
    // 审核未通过
    outReview(id) {
      this.$prompt('请输入打回原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /.+/,
        inputErrorMessage: '打回原因不能为空'
      }).then(({ value }) => {
        admin.outReviewApp(id, value)
          .then(response => {
            // 处理成功响应
            this.$message({
              type: 'success',
              message: '提交成功'
            });
            this.getList();
          })
          .catch(error => {
            // 处理错误响应
            this.$message({
              type: 'error',
              message: '提交失败'
            });
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },

// 审核通过
    okReview(id) {
      this.$prompt('请输入批准金额', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\d+(\.\d+)?$/,
        inputErrorMessage: '金额不能为空且必须是数字'
      }).then(({ value }) => {
        admin.okReviewApp(id, value)
          .then(response => {
            // 处理成功响应
            this.$message({
              type: 'success',
              message: '提交成功'
            });
            this.getList();
          })
          .catch(error => {
            // 处理错误响应
            this.$message({
              type: 'error',
              message: '提交失败'
            });
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },

    // okReview(id){
    //   admin.okReviewApp(id).then(response => {
    //     this.$message({
    //       type: 'success',
    //       message: '提交成功'
    //     });
    //     this.getList()
    //   })
    // },




  }
}
</script>
<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.edit-button {
  color: rgb(189, 142, 67); /* 紫色 */
}

.disable-button {
  color: #6ebf00; /* 蓝色 */
}

.delete-button {
  color: rgb(255, 140, 140); /* 红色 */
}
</style>
